<template>
  <el-menu
    :collapse="isCollapse"
    default-active="1"
    class="el-menu-vertical-demo"
    active-text-color="#ffd04b"
    background-color="#545c64"
    text-color="#fff"
  >
    <div class="xd-icon">
      <el-icon class="gl"><Reading /></el-icon>
      <span>图书管理系统</span>
    </div>
    <el-menu-item index="1" @click="courseHandle('文学')">
      <el-icon><Document /></el-icon>
      <template #title>文学类</template>
    </el-menu-item>
    <el-menu-item index="2" @click="courseHandle('艺术')">
      <el-icon><Apple /></el-icon>
      <template #title>艺术类</template>
    </el-menu-item>
    <el-menu-item index="3" @click="courseHandle('科技')">
      <el-icon><CoffeeCup /></el-icon>
      <template #title>科技类</template>
    </el-menu-item>
    <el-menu-item index="4" @click="courseHandle('历史')">
      <el-icon><Collection /></el-icon>
      <template #title>历史类</template>
    </el-menu-item>
    <el-menu-item index="5" @click="courseHandle('儿童')">
      <el-icon><IceCreamRound /></el-icon>
      <template #title>儿童类</template>
    </el-menu-item>
    <el-menu-item index="6" @click="courseHandle('教材')">
      <el-icon><School /></el-icon>
      <template #title>教材类</template>
    </el-menu-item>
    <el-menu-item index="7" @click="addBook(true)">
      <el-icon><Plus /></el-icon>
      <template #title>添加图书</template>
    </el-menu-item>
    <el-menu-item index="8" @click="echt(true)">
      <el-icon><Aim /></el-icon>
      <template #title>数据可视化</template>
    </el-menu-item>
  </el-menu>
</template>
<script setup>
import { defineProps } from 'vue'
const { isCollapse } = defineProps(['isCollapse'])
import emitter from '../utils/eventBus'
import { ElMessage } from 'element-plus'

// 点击类目tab触发图书列表重新获取
const courseHandle = (type) => {
  emitter.emit('course', type)
}

// 点击添加图书显示对话框
const addBook = (flag) => {
  emitter.emit('add', flag)
}

// 点击数据可视化显示对话框
const echt = (flag) => {
  emitter.emit('ech', flag)
}
</script>
<style lang="less" scoped>
.el-radio-button__inner {
  padding: 0;
}

.el-menu--collapse {
  border: none;
}

.el-menu:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  border: none;
}

.xd-icon {
  display: flex;
  align-items: center;
  font-weight: 600;
  height: 60px;
  background-color: #fff;
  white-space: nowrap;
  padding-left: 17px;
}
.gl {
  font-size: 40px;
  margin-right: 16px;
  color: #a91d02;
}
</style>
